With `vite-plugin-ssr` you keep control over how your pages are rendered.

```jsx
// /pages/about.page.js
// Environment: Node.js, Browser

export { Page }

// `Page` can be anything you want such as a React/Vue/Svelte/... component
function Page() {
  return <>
    <h1>About</h1>
    <p>This is our first vite-plugin-ssr app.</p>
  </>
}
```
```js
// _default.page.server.js
// Environment: Node.js

import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr'

// This can be any UI framework (React, Vue, Svelte, ...)
import { renderToHtml } from 'my-favorite-view-framework'

// You control how `Page` is rendered to HTML
export async function render({ Page }) {
  const pageHtml = await renderToHtml(Page)
  const title = 'My first vite-plugin-ssr app'
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>
        <div id="page-root">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`
}
```
```js
// _default.page.client.js
// Environment: Browser

import { getPage } from 'vite-plugin-ssr/client'
import { hydrateToDom } from 'my-favorite-view-framework'

// This file defines the *entire* browser-side code.
// If you leave this file empty then there is zero browser-side JavaScript.

hydrate()

// You control how `Page` is hydrated
async function hydrate() {
  const { Page } = await getPage() // In production, `await getPage()` is preloaded
  await hydrateToDom(Page)
}
```

This means you can use and integrate any tool you want simply by following the tool's official installation guide.
